<!doctype html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>基于bootstrap功能齐全的jQuery进度条插件</title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/default.css">
		<link rel="stylesheet" type="text/css" href="css/minddust.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap-progressbar-3.2.0.min.css">
		<link rel="stylesheet" type="text/css" href="css/bootstrap-progressbar-demo.css">
		<script src="js/common.min.js"></script>

	</head>

	<body>
		<div class="htmleaf-container">
			<header class="htmleaf-header">
				<h1>基于bootstrap功能齐全的jQuery进度条插件 <span>bootstrap-progressbar is a jQuery plugin which extends the basic twitter-bootstrap progressbar</span></h1>
			</header>

			<div class="container">
				<div id="content">
					<header id="post-header">
						<h1 id="post-title">bootstrap-progressbar</h1>
						<h4 id="post-subtitle">jQuery plugin for twitter bootstrap's progressbar (v2 & v3) for displaying text and animations</h4>
					</header>
					<div class="callout callout-info">all examples have to be triggered manually by clicking the <button type="button" class="btn btn-primary">start</button> or <button type="button" class="btn btn-danger">reset</button> button.</div>

					<!---->
					<p><strong>水平式的</strong></p>

					<ul>
						<li>
							<a href="#h-default">默认设置</a>
						</li>
						<li>
							<a href="#h-right">默认设置(右边)</a>
						</li>
						<li>
							<a href="#h-fill">filled text</a>
						</li>
						<li>
							<a href="#h-fill-nonpercentage">filled text (nonpercentage)</a>
						</li>
						<li>
							<a href="#h-center">centered text</a>
						</li>
						<li>
							<a href="#h-center-nonpercentage">centered text (nonpercentage)</a>
						</li>
					</ul>

					<p><strong>垂直式的</strong></p>

					<ul>
						<li>
							<a href="#v-default">default settings</a>
						</li>
						<li>
							<a href="#v-bottom">default settings (bottom)</a>
						</li>
						<li>
							<a href="#v-fill">filled text</a>
						</li>
						<li>
							<a href="#v-fill-nonpercentage">filled text (nonpercentage)</a>
						</li>
						<li>
							<a href="#v-center">centered text</a>
						</li>
						<li>
							<a href="#v-center-nonpercentage">centered text (nonpercentage)</a>
						</li>
					</ul>

					<p><strong>杂项</strong></p>

					<ul>
						<li>
							<a href="#m-delay">transition delay</a>
						</li>
						<li>
							<a href="#m-refresh-speed">refresh speed</a>
						</li>
						<li>
							<a href="#m-custom-percentage-format">custom percent format</a>
						</li>
						<li>
							<a href="#m-custom-amount-format">custom amount format</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-with-min-value">custom amount format with min value</a>
						</li>
						<li>
							<a href="#m-callback">callbacks</a>
						</li>
						<li>
							<a href="#m-callback-this">callbacks using $this</a>
						</li>
						<li>
							<a href="#m-error">error</a>
						</li>
						<li>
							<a href="#m-multi-trigger">multi trigger</a>
						</li>
					</ul>

					<h3>Horizontal</h3>

					<p>
						<a name="h-default"></a>
					</p>

					<h4>default settings</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#h-default-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#h-default-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#h-default-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#h-default-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#h-default-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#h-default-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="h-default-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="h-default-basic-start">start</button> <button type="button" class="btn btn-danger" id="h-default-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-default-basic-start').click(function() {
											var $pb = $('#h-default-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar();
										});
										$('#h-default-basic-reset').click(function() {
											$('#h-default-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-default-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="h-default-themed-start">start</button> <button type="button" class="btn btn-danger" id="h-default-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-default-themed-start').click(function() {
											$('#h-default-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-default-themed-reset').click(function() {
											$('#h-default-themed .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-default-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="h-default-striped-start">start</button> <button type="button" class="btn btn-danger" id="h-default-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-default-striped-start').click(function() {
											$('#h-default-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-default-striped-reset').click(function() {
											$('#h-default-striped .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-default-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="h-default-animated-start">start</button> <button type="button" class="btn btn-danger" id="h-default-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-default-animated-start').click(function() {
											$('#h-default-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-default-animated-reset').click(function() {
											$('#h-default-animated .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-default-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-default-aria-start">start</button> <button type="button" class="btn btn-danger" id="h-default-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-default-aria-start').click(function() {
											$('#h-default-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-default-aria-reset').click(function() {
											$('#h-default-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar();
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-default-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-default-animation-start">start</button> <button type="button" class="btn btn-danger" id="h-default-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-default-animation-start').click(function() {
											$('#h-default-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-default-animation-reset').click(function() {
											$('#h-default-animation .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="h-right"></a>
					</p>

					<h4>default settings (right)</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#h-right-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#h-right-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#h-right-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#h-right-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#h-right-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#h-right-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="h-right-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="h-right-basic-start">start</button> <button type="button" class="btn btn-danger" id="h-right-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress right">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-right-basic-start').click(function() {
											var $pb = $('#h-right-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar();
										});
										$('#h-right-basic-reset').click(function() {
											$('#h-right-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-right-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="h-right-themed-start">start</button> <button type="button" class="btn btn-danger" id="h-right-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress right">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-right-themed-start').click(function() {
											$('#h-right-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-right-themed-reset').click(function() {
											$('#h-right-themed .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-right-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="h-right-striped-start">start</button> <button type="button" class="btn btn-danger" id="h-right-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped right">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-right-striped-start').click(function() {
											$('#h-right-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-right-striped-reset').click(function() {
											$('#h-right-striped .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-right-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="h-right-animated-start">start</button> <button type="button" class="btn btn-danger" id="h-right-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active right">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active right">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active right">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active right">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active right">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-right-animated-start').click(function() {
											$('#h-right-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-right-animated-reset').click(function() {
											$('#h-right-animated .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-right-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-right-aria-start">start</button> <button type="button" class="btn btn-danger" id="h-right-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped right">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped right">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-right-aria-start').click(function() {
											$('#h-right-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-right-aria-reset').click(function() {
											$('#h-right-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar();
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-right-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-right-animation-start">start</button> <button type="button" class="btn btn-danger" id="h-right-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress right">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress right">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-right-animation-start').click(function() {
											$('#h-right-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#h-right-animation-reset').click(function() {
											$('#h-right-animation .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress right&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="h-fill"></a>
					</p>

					<h4>filled text</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#h-fill-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#h-fill-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#h-fill-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#h-fill-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#h-fill-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#h-fill-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="h-fill-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="h-fill-basic-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-basic-start').click(function() {
											var $pb = $('#h-fill-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'fill'
											});
										});
										$('#h-fill-basic-reset').click(function() {
											$('#h-fill-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="h-fill-themed-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-themed-start').click(function() {
											$('#h-fill-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#h-fill-themed-reset').click(function() {
											$('#h-fill-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="h-fill-striped-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-striped-start').click(function() {
											$('#h-fill-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#h-fill-striped-reset').click(function() {
											$('#h-fill-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="h-fill-animated-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-animated-start').click(function() {
											$('#h-fill-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#h-fill-animated-reset').click(function() {
											$('#h-fill-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-fill-aria-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-aria-start').click(function() {
											$('#h-fill-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#h-fill-aria-reset').click(function() {
											$('#h-fill-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-fill-animation-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-animation-start').click(function() {
											$('#h-fill-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#h-fill-animation-reset').click(function() {
											$('#h-fill-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="h-fill-nonpercentage"></a>
					</p>

					<h4>filled text (nonpercentage)</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#h-fill-nonpercentage-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#h-fill-nonpercentage-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#h-fill-nonpercentage-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#h-fill-nonpercentage-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#h-fill-nonpercentage-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#h-fill-nonpercentage-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="h-fill-nonpercentage-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="h-fill-nonpercentage-basic-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-nonpercentage-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-nonpercentage-basic-start').click(function() {
											var $pb = $('#h-fill-nonpercentage-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
										$('#h-fill-nonpercentage-basic-reset').click(function() {
											$('#h-fill-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-nonpercentage-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="h-fill-nonpercentage-themed-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-nonpercentage-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-nonpercentage-themed-start').click(function() {
											$('#h-fill-nonpercentage-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#h-fill-nonpercentage-themed-reset').click(function() {
											$('#h-fill-nonpercentage-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-nonpercentage-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="h-fill-nonpercentage-striped-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-nonpercentage-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-nonpercentage-striped-start').click(function() {
											$('#h-fill-nonpercentage-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#h-fill-nonpercentage-striped-reset').click(function() {
											$('#h-fill-nonpercentage-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-nonpercentage-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="h-fill-nonpercentage-animated-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-nonpercentage-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-nonpercentage-animated-start').click(function() {
											$('#h-fill-nonpercentage-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#h-fill-nonpercentage-animated-reset').click(function() {
											$('#h-fill-nonpercentage-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-nonpercentage-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-fill-nonpercentage-aria-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-nonpercentage-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-nonpercentage-aria-start').click(function() {
											$('#h-fill-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#h-fill-nonpercentage-aria-reset').click(function() {
											$('#h-fill-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-fill-nonpercentage-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-fill-nonpercentage-animation-start">start</button> <button type="button" class="btn btn-danger" id="h-fill-nonpercentage-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-fill-nonpercentage-animation-start').click(function() {
											$('#h-fill-nonpercentage-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#h-fill-nonpercentage-animation-reset').click(function() {
											$('#h-fill-nonpercentage-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="h-center"></a>
					</p>

					<h4>centered text</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#h-center-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#h-center-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#h-center-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#h-center-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#h-center-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#h-center-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="h-center-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="h-center-basic-start">start</button> <button type="button" class="btn btn-danger" id="h-center-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-basic-start').click(function() {
											var $pb = $('#h-center-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center'
											});
										});
										$('#h-center-basic-reset').click(function() {
											$('#h-center-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="h-center-themed-start">start</button> <button type="button" class="btn btn-danger" id="h-center-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-themed-start').click(function() {
											$('#h-center-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#h-center-themed-reset').click(function() {
											$('#h-center-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="h-center-striped-start">start</button> <button type="button" class="btn btn-danger" id="h-center-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-striped-start').click(function() {
											$('#h-center-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#h-center-striped-reset').click(function() {
											$('#h-center-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="h-center-animated-start">start</button> <button type="button" class="btn btn-danger" id="h-center-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-animated-start').click(function() {
											$('#h-center-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#h-center-animated-reset').click(function() {
											$('#h-center-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-center-aria-start">start</button> <button type="button" class="btn btn-danger" id="h-center-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-aria-start').click(function() {
											$('#h-center-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#h-center-aria-reset').click(function() {
											$('#h-center-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-center-animation-start">start</button> <button type="button" class="btn btn-danger" id="h-center-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-animation-start').click(function() {
											$('#h-center-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#h-center-animation-reset').click(function() {
											$('#h-center-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="h-center-nonpercentage"></a>
					</p>

					<h4>centered text (nonpercentage)</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#h-center-nonpercentage-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#h-center-nonpercentage-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#h-center-nonpercentage-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#h-center-nonpercentage-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#h-center-nonpercentage-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#h-center-nonpercentage-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="h-center-nonpercentage-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="h-center-nonpercentage-basic-start">start</button> <button type="button" class="btn btn-danger" id="h-center-nonpercentage-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-nonpercentage-basic-start').click(function() {
											var $pb = $('#h-center-nonpercentage-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
										$('#h-center-nonpercentage-basic-reset').click(function() {
											$('#h-center-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-nonpercentage-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="h-center-nonpercentage-themed-start">start</button> <button type="button" class="btn btn-danger" id="h-center-nonpercentage-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-nonpercentage-themed-start').click(function() {
											$('#h-center-nonpercentage-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#h-center-nonpercentage-themed-reset').click(function() {
											$('#h-center-nonpercentage-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-nonpercentage-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="h-center-nonpercentage-striped-start">start</button> <button type="button" class="btn btn-danger" id="h-center-nonpercentage-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-nonpercentage-striped-start').click(function() {
											$('#h-center-nonpercentage-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#h-center-nonpercentage-striped-reset').click(function() {
											$('#h-center-nonpercentage-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-nonpercentage-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="h-center-nonpercentage-animated-start">start</button> <button type="button" class="btn btn-danger" id="h-center-nonpercentage-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-nonpercentage-animated-start').click(function() {
											$('#h-center-nonpercentage-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#h-center-nonpercentage-animated-reset').click(function() {
											$('#h-center-nonpercentage-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-nonpercentage-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-center-nonpercentage-aria-start">start</button> <button type="button" class="btn btn-danger" id="h-center-nonpercentage-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-nonpercentage-aria-start').click(function() {
											$('#h-center-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#h-center-nonpercentage-aria-reset').click(function() {
											$('#h-center-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="h-center-nonpercentage-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="h-center-nonpercentage-animation-start">start</button> <button type="button" class="btn btn-danger" id="h-center-nonpercentage-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#h-center-nonpercentage-animation-start').click(function() {
											$('#h-center-nonpercentage-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#h-center-nonpercentage-animation-reset').click(function() {
											$('#h-center-nonpercentage-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<h3>Vertical</h3>

					<p>
						<a name="v-default"></a>
					</p>

					<h4>default settings</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#v-default-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#v-default-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#v-default-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#v-default-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#v-default-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#v-default-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="v-default-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="v-default-basic-start">start</button> <button type="button" class="btn btn-danger" id="v-default-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-default-basic-start').click(function() {
											var $pb = $('#v-default-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar();
										});
										$('#v-default-basic-reset').click(function() {
											$('#v-default-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-default-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="v-default-themed-start">start</button> <button type="button" class="btn btn-danger" id="v-default-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-default-themed-start').click(function() {
											$('#v-default-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-default-themed-reset').click(function() {
											$('#v-default-themed .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-default-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="v-default-striped-start">start</button> <button type="button" class="btn btn-danger" id="v-default-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-default-striped-start').click(function() {
											$('#v-default-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-default-striped-reset').click(function() {
											$('#v-default-striped .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-default-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="v-default-animated-start">start</button> <button type="button" class="btn btn-danger" id="v-default-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-default-animated-start').click(function() {
											$('#v-default-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-default-animated-reset').click(function() {
											$('#v-default-animated .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-default-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-default-aria-start">start</button> <button type="button" class="btn btn-danger" id="v-default-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-default-aria-start').click(function() {
											$('#v-default-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-default-aria-reset').click(function() {
											$('#v-default-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar();
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-default-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-default-animation-start">start</button> <button type="button" class="btn btn-danger" id="v-default-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-default-animation-start').click(function() {
											$('#v-default-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-default-animation-reset').click(function() {
											$('#v-default-animation .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="v-bottom"></a>
					</p>

					<h4>default settings (bottom)</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#v-bottom-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#v-bottom-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#v-bottom-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#v-bottom-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#v-bottom-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#v-bottom-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="v-bottom-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="v-bottom-basic-start">start</button> <button type="button" class="btn btn-danger" id="v-bottom-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical bottom">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-bottom-basic-start').click(function() {
											var $pb = $('#v-bottom-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar();
										});
										$('#v-bottom-basic-reset').click(function() {
											$('#v-bottom-basic .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-bottom-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="v-bottom-themed-start">start</button> <button type="button" class="btn btn-danger" id="v-bottom-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-bottom-themed-start').click(function() {
											$('#v-bottom-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-bottom-themed-reset').click(function() {
											$('#v-bottom-themed .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-bottom-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="v-bottom-striped-start">start</button> <button type="button" class="btn btn-danger" id="v-bottom-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-bottom-striped-start').click(function() {
											$('#v-bottom-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-bottom-striped-reset').click(function() {
											$('#v-bottom-striped .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-bottom-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="v-bottom-animated-start">start</button> <button type="button" class="btn btn-danger" id="v-bottom-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped active vertical bottom">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active vertical bottom">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active vertical bottom">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active vertical bottom">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active vertical bottom">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-bottom-animated-start').click(function() {
											$('#v-bottom-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-bottom-animated-reset').click(function() {
											$('#v-bottom-animated .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-bottom-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-bottom-aria-start">start</button> <button type="button" class="btn btn-danger" id="v-bottom-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped vertical bottom">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-bottom-aria-start').click(function() {
											$('#v-bottom-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-bottom-aria-reset').click(function() {
											$('#v-bottom-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar();
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-bottom-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-bottom-animation-start">start</button> <button type="button" class="btn btn-danger" id="v-bottom-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical bottom">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical bottom">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-bottom-animation-start').click(function() {
											$('#v-bottom-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar();
											});
										});
										$('#v-bottom-animation-reset').click(function() {
											$('#v-bottom-animation .progress-bar').attr('data-transitiongoal', 0).progressbar();
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical bottom&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar();
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="v-fill"></a>
					</p>

					<h4>filled text</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#v-fill-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#v-fill-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#v-fill-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#v-fill-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#v-fill-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#v-fill-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="v-fill-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="v-fill-basic-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-basic-start').click(function() {
											var $pb = $('#v-fill-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'fill'
											});
										});
										$('#v-fill-basic-reset').click(function() {
											$('#v-fill-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="v-fill-themed-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-themed-start').click(function() {
											$('#v-fill-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#v-fill-themed-reset').click(function() {
											$('#v-fill-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="v-fill-striped-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-striped-start').click(function() {
											$('#v-fill-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#v-fill-striped-reset').click(function() {
											$('#v-fill-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="v-fill-animated-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-animated-start').click(function() {
											$('#v-fill-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#v-fill-animated-reset').click(function() {
											$('#v-fill-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-fill-aria-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-aria-start').click(function() {
											$('#v-fill-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#v-fill-aria-reset').click(function() {
											$('#v-fill-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-fill-animation-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-animation-start').click(function() {
											$('#v-fill-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill'
												});
											});
										});
										$('#v-fill-animation-reset').click(function() {
											$('#v-fill-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="v-fill-nonpercentage"></a>
					</p>

					<h4>filled text (nonpercentage)</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#v-fill-nonpercentage-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#v-fill-nonpercentage-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#v-fill-nonpercentage-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#v-fill-nonpercentage-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#v-fill-nonpercentage-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#v-fill-nonpercentage-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="v-fill-nonpercentage-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="v-fill-nonpercentage-basic-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-nonpercentage-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-nonpercentage-basic-start').click(function() {
											var $pb = $('#v-fill-nonpercentage-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
										$('#v-fill-nonpercentage-basic-reset').click(function() {
											$('#v-fill-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-nonpercentage-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="v-fill-nonpercentage-themed-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-nonpercentage-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-nonpercentage-themed-start').click(function() {
											$('#v-fill-nonpercentage-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#v-fill-nonpercentage-themed-reset').click(function() {
											$('#v-fill-nonpercentage-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-nonpercentage-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="v-fill-nonpercentage-striped-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-nonpercentage-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-nonpercentage-striped-start').click(function() {
											$('#v-fill-nonpercentage-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#v-fill-nonpercentage-striped-reset').click(function() {
											$('#v-fill-nonpercentage-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-nonpercentage-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="v-fill-nonpercentage-animated-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-nonpercentage-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-nonpercentage-animated-start').click(function() {
											$('#v-fill-nonpercentage-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#v-fill-nonpercentage-animated-reset').click(function() {
											$('#v-fill-nonpercentage-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-nonpercentage-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-fill-nonpercentage-aria-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-nonpercentage-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-nonpercentage-aria-start').click(function() {
											$('#v-fill-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#v-fill-nonpercentage-aria-reset').click(function() {
											$('#v-fill-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-fill-nonpercentage-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-fill-nonpercentage-animation-start">start</button> <button type="button" class="btn btn-danger" id="v-fill-nonpercentage-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-fill-nonpercentage-animation-start').click(function() {
											$('#v-fill-nonpercentage-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'fill',
													use_percentage: false
												});
											});
										});
										$('#v-fill-nonpercentage-animation-reset').click(function() {
											$('#v-fill-nonpercentage-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'fill',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;fill&#39;, use_percentage: false});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="v-center"></a>
					</p>

					<h4>centered text</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#v-center-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#v-center-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#v-center-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#v-center-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#v-center-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#v-center-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="v-center-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="v-center-basic-start">start</button> <button type="button" class="btn btn-danger" id="v-center-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-basic-start').click(function() {
											var $pb = $('#v-center-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center'
											});
										});
										$('#v-center-basic-reset').click(function() {
											$('#v-center-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="v-center-themed-start">start</button> <button type="button" class="btn btn-danger" id="v-center-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-themed-start').click(function() {
											$('#v-center-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#v-center-themed-reset').click(function() {
											$('#v-center-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="v-center-striped-start">start</button> <button type="button" class="btn btn-danger" id="v-center-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-striped-start').click(function() {
											$('#v-center-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#v-center-striped-reset').click(function() {
											$('#v-center-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="v-center-animated-start">start</button> <button type="button" class="btn btn-danger" id="v-center-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-animated-start').click(function() {
											$('#v-center-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#v-center-animated-reset').click(function() {
											$('#v-center-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-center-aria-start">start</button> <button type="button" class="btn btn-danger" id="v-center-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-aria-start').click(function() {
											$('#v-center-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#v-center-aria-reset').click(function() {
											$('#v-center-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-center-animation-start">start</button> <button type="button" class="btn btn-danger" id="v-center-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-animation-start').click(function() {
											$('#v-center-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center'
												});
											});
										});
										$('#v-center-animation-reset').click(function() {
											$('#v-center-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center'
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="v-center-nonpercentage"></a>
					</p>

					<h4>centered text (nonpercentage)</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#v-center-nonpercentage-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#v-center-nonpercentage-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#v-center-nonpercentage-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#v-center-nonpercentage-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#v-center-nonpercentage-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#v-center-nonpercentage-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="v-center-nonpercentage-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="v-center-nonpercentage-basic-start">start</button> <button type="button" class="btn btn-danger" id="v-center-nonpercentage-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-nonpercentage-basic-start').click(function() {
											var $pb = $('#v-center-nonpercentage-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
										$('#v-center-nonpercentage-basic-reset').click(function() {
											$('#v-center-nonpercentage-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-nonpercentage-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="v-center-nonpercentage-themed-start">start</button> <button type="button" class="btn btn-danger" id="v-center-nonpercentage-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-nonpercentage-themed-start').click(function() {
											$('#v-center-nonpercentage-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#v-center-nonpercentage-themed-reset').click(function() {
											$('#v-center-nonpercentage-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-nonpercentage-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="v-center-nonpercentage-striped-start">start</button> <button type="button" class="btn btn-danger" id="v-center-nonpercentage-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-nonpercentage-striped-start').click(function() {
											$('#v-center-nonpercentage-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#v-center-nonpercentage-striped-reset').click(function() {
											$('#v-center-nonpercentage-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-nonpercentage-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="v-center-nonpercentage-animated-start">start</button> <button type="button" class="btn btn-danger" id="v-center-nonpercentage-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-nonpercentage-animated-start').click(function() {
											$('#v-center-nonpercentage-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#v-center-nonpercentage-animated-reset').click(function() {
											$('#v-center-nonpercentage-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-nonpercentage-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-center-nonpercentage-aria-start">start</button> <button type="button" class="btn btn-danger" id="v-center-nonpercentage-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress progress-striped vertical">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped vertical">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-nonpercentage-aria-start').click(function() {
											$('#v-center-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#v-center-nonpercentage-aria-reset').click(function() {
											$('#v-center-nonpercentage-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="v-center-nonpercentage-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="v-center-nonpercentage-animation-start">start</button> <button type="button" class="btn btn-danger" id="v-center-nonpercentage-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="fixed-height-250">
									<div class="progress vertical">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress vertical">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#v-center-nonpercentage-animation-start').click(function() {
											$('#v-center-nonpercentage-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false
												});
											});
										});
										$('#v-center-nonpercentage-animation-reset').click(function() {
											$('#v-center-nonpercentage-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress vertical&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<h3>Misc</h3>

					<p>
						<a name="m-delay"></a>
					</p>

					<h4>transition delay</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#m-delay-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#m-delay-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#m-delay-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#m-delay-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#m-delay-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#m-delay-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="m-delay-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="m-delay-basic-start">start</button> <button type="button" class="btn btn-danger" id="m-delay-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-delay-basic-start').click(function() {
											var $pb = $('#m-delay-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												transition_delay: 3000
											});
										});
										$('#m-delay-basic-reset').click(function() {
											$('#m-delay-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												transition_delay: 3000
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({transition_delay: 3000});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-delay-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="m-delay-themed-start">start</button> <button type="button" class="btn btn-danger" id="m-delay-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-delay-themed-start').click(function() {
											$('#m-delay-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													transition_delay: 3000
												});
											});
										});
										$('#m-delay-themed-reset').click(function() {
											$('#m-delay-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												transition_delay: 3000
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({transition_delay: 3000});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-delay-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="m-delay-striped-start">start</button> <button type="button" class="btn btn-danger" id="m-delay-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-delay-striped-start').click(function() {
											$('#m-delay-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													transition_delay: 3000
												});
											});
										});
										$('#m-delay-striped-reset').click(function() {
											$('#m-delay-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												transition_delay: 3000
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({transition_delay: 3000});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-delay-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="m-delay-animated-start">start</button> <button type="button" class="btn btn-danger" id="m-delay-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-delay-animated-start').click(function() {
											$('#m-delay-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													transition_delay: 3000
												});
											});
										});
										$('#m-delay-animated-reset').click(function() {
											$('#m-delay-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												transition_delay: 3000
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({transition_delay: 3000});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-delay-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-delay-aria-start">start</button> <button type="button" class="btn btn-danger" id="m-delay-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-delay-aria-start').click(function() {
											$('#m-delay-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													transition_delay: 3000
												});
											});
										});
										$('#m-delay-aria-reset').click(function() {
											$('#m-delay-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													transition_delay: 3000
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({transition_delay: 3000});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-delay-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-delay-animation-start">start</button> <button type="button" class="btn btn-danger" id="m-delay-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-delay-animation-start').click(function() {
											$('#m-delay-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													transition_delay: 3000
												});
											});
										});
										$('#m-delay-animation-reset').click(function() {
											$('#m-delay-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												transition_delay: 3000
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({transition_delay: 3000});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="m-refresh-speed"></a>
					</p>

					<h4>refresh speed</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#m-refresh-speed-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#m-refresh-speed-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#m-refresh-speed-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#m-refresh-speed-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#m-refresh-speed-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#m-refresh-speed-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="m-refresh-speed-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="m-refresh-speed-basic-start">start</button> <button type="button" class="btn btn-danger" id="m-refresh-speed-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-refresh-speed-basic-start').click(function() {
											var $pb = $('#m-refresh-speed-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center',
												use_percentage: false,
												refresh_speed: 500
											});
										});
										$('#m-refresh-speed-basic-reset').click(function() {
											$('#m-refresh-speed-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												refresh_speed: 500
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, refresh_speed: 500});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-refresh-speed-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="m-refresh-speed-themed-start">start</button> <button type="button" class="btn btn-danger" id="m-refresh-speed-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-refresh-speed-themed-start').click(function() {
											$('#m-refresh-speed-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													refresh_speed: 500
												});
											});
										});
										$('#m-refresh-speed-themed-reset').click(function() {
											$('#m-refresh-speed-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												refresh_speed: 500
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, refresh_speed: 500});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-refresh-speed-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="m-refresh-speed-striped-start">start</button> <button type="button" class="btn btn-danger" id="m-refresh-speed-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-refresh-speed-striped-start').click(function() {
											$('#m-refresh-speed-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													refresh_speed: 500
												});
											});
										});
										$('#m-refresh-speed-striped-reset').click(function() {
											$('#m-refresh-speed-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												refresh_speed: 500
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, refresh_speed: 500});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-refresh-speed-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="m-refresh-speed-animated-start">start</button> <button type="button" class="btn btn-danger" id="m-refresh-speed-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-refresh-speed-animated-start').click(function() {
											$('#m-refresh-speed-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													refresh_speed: 500
												});
											});
										});
										$('#m-refresh-speed-animated-reset').click(function() {
											$('#m-refresh-speed-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												refresh_speed: 500
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, refresh_speed: 500});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-refresh-speed-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-refresh-speed-aria-start">start</button> <button type="button" class="btn btn-danger" id="m-refresh-speed-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-refresh-speed-aria-start').click(function() {
											$('#m-refresh-speed-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													refresh_speed: 500
												});
											});
										});
										$('#m-refresh-speed-aria-reset').click(function() {
											$('#m-refresh-speed-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													refresh_speed: 500
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, refresh_speed: 500});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-refresh-speed-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-refresh-speed-animation-start">start</button> <button type="button" class="btn btn-danger" id="m-refresh-speed-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-refresh-speed-animation-start').click(function() {
											$('#m-refresh-speed-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													refresh_speed: 500
												});
											});
										});
										$('#m-refresh-speed-animation-reset').click(function() {
											$('#m-refresh-speed-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												refresh_speed: 500
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, refresh_speed: 500});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="m-custom-percentage-format"></a>
					</p>

					<h4>custom percent format</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#m-custom-percentage-format-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#m-custom-percentage-format-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#m-custom-percentage-format-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#m-custom-percentage-format-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#m-custom-percentage-format-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#m-custom-percentage-format-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="m-custom-percentage-format-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="m-custom-percentage-format-basic-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-percentage-format-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-percentage-format-basic-start').click(function() {
											var $pb = $('#m-custom-percentage-format-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center',
												percent_format: function(p) {
													return p + ' percent';
												}
											});
										});
										$('#m-custom-percentage-format-basic-reset').click(function() {
											$('#m-custom-percentage-format-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												percent_format: function(p) {
													return p + ' percent';
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, percent_format: function(p) {return p + &#39; percent&#39;;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-percentage-format-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="m-custom-percentage-format-themed-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-percentage-format-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-percentage-format-themed-start').click(function() {
											$('#m-custom-percentage-format-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													percent_format: function(p) {
														return p + ' percent';
													}
												});
											});
										});
										$('#m-custom-percentage-format-themed-reset').click(function() {
											$('#m-custom-percentage-format-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												percent_format: function(p) {
													return p + ' percent';
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, percent_format: function(p) {return p + &#39; percent&#39;;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-percentage-format-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="m-custom-percentage-format-striped-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-percentage-format-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-percentage-format-striped-start').click(function() {
											$('#m-custom-percentage-format-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													percent_format: function(p) {
														return p + ' percent';
													}
												});
											});
										});
										$('#m-custom-percentage-format-striped-reset').click(function() {
											$('#m-custom-percentage-format-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												percent_format: function(p) {
													return p + ' percent';
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, percent_format: function(p) {return p + &#39; percent&#39;;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-percentage-format-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="m-custom-percentage-format-animated-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-percentage-format-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-percentage-format-animated-start').click(function() {
											$('#m-custom-percentage-format-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													percent_format: function(p) {
														return p + ' percent';
													}
												});
											});
										});
										$('#m-custom-percentage-format-animated-reset').click(function() {
											$('#m-custom-percentage-format-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												percent_format: function(p) {
													return p + ' percent';
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, percent_format: function(p) {return p + &#39; percent&#39;;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-percentage-format-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-custom-percentage-format-aria-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-percentage-format-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-percentage-format-aria-start').click(function() {
											$('#m-custom-percentage-format-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													percent_format: function(p) {
														return p + ' percent';
													}
												});
											});
										});
										$('#m-custom-percentage-format-aria-reset').click(function() {
											$('#m-custom-percentage-format-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center',
													percent_format: function(p) {
														return p + ' percent';
													}
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, percent_format: function(p) {return p + &#39; percent&#39;;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-percentage-format-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-custom-percentage-format-animation-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-percentage-format-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-percentage-format-animation-start').click(function() {
											$('#m-custom-percentage-format-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													percent_format: function(p) {
														return p + ' percent';
													}
												});
											});
										});
										$('#m-custom-percentage-format-animation-reset').click(function() {
											$('#m-custom-percentage-format-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												percent_format: function(p) {
													return p + ' percent';
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, percent_format: function(p) {return p + &#39; percent&#39;;}});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="m-custom-amount-format"></a>
					</p>

					<h4>custom amount format</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#m-custom-amount-format-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="m-custom-amount-format-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-basic-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-basic-start').click(function() {
											var $pb = $('#m-custom-amount-format-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, t) {
													return p + ' of ' + t;
												}
											});
										});
										$('#m-custom-amount-format-basic-reset').click(function() {
											$('#m-custom-amount-format-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, t) {
													return p + ' of ' + t;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, t) {return p + &#39; of &#39; + t;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-themed-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-themed-start').click(function() {
											$('#m-custom-amount-format-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, t) {
														return p + ' of ' + t;
													}
												});
											});
										});
										$('#m-custom-amount-format-themed-reset').click(function() {
											$('#m-custom-amount-format-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, t) {
													return p + ' of ' + t;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, t) {return p + &#39; of &#39; + t;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-striped-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-striped-start').click(function() {
											$('#m-custom-amount-format-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, t) {
														return p + ' of ' + t;
													}
												});
											});
										});
										$('#m-custom-amount-format-striped-reset').click(function() {
											$('#m-custom-amount-format-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, t) {
													return p + ' of ' + t;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, t) {return p + &#39; of &#39; + t;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-animated-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-animated-start').click(function() {
											$('#m-custom-amount-format-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, t) {
														return p + ' of ' + t;
													}
												});
											});
										});
										$('#m-custom-amount-format-animated-reset').click(function() {
											$('#m-custom-amount-format-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, t) {
													return p + ' of ' + t;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, t) {return p + &#39; of &#39; + t;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-aria-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-aria-start').click(function() {
											$('#m-custom-amount-format-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, t) {
														return p + ' of ' + t;
													}
												});
											});
										});
										$('#m-custom-amount-format-aria-reset').click(function() {
											$('#m-custom-amount-format-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, t) {
														return p + ' of ' + t;
													}
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, t) {return p + &#39; of &#39; + t;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-animation-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-animation-start').click(function() {
											$('#m-custom-amount-format-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, t) {
														return p + ' of ' + t;
													}
												});
											});
										});
										$('#m-custom-amount-format-animation-reset').click(function() {
											$('#m-custom-amount-format-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, t) {
													return p + ' of ' + t;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, t) {return p + &#39; of &#39; + t;}});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="m-custom-amount-format-with-min-value"></a>
					</p>

					<h4>custom amount format with min value</h4>

					<ul class="nav nav-tabs" role="tablist">
						<li class="active">
							<a href="#m-custom-amount-format-with-min-value-basic" role="tab" data-toggle="tab">basic</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-with-min-value-themed" role="tab" data-toggle="tab">themed</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-with-min-value-striped" role="tab" data-toggle="tab">striped</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-with-min-value-animated" role="tab" data-toggle="tab">animated</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-with-min-value-aria" role="tab" data-toggle="tab">aria</a>
						</li>
						<li>
							<a href="#m-custom-amount-format-with-min-value-animation" role="tab" data-toggle="tab">animation</a>
						</li>
					</ul>

					<div class="tab-content">
						<div class="tab-pane fade in active" id="m-custom-amount-format-with-min-value-basic">
							<h5>basic progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-with-min-value-basic-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-with-min-value-basic-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="75"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-with-min-value-basic-start').click(function() {
											var $pb = $('#m-custom-amount-format-with-min-value-basic .progress-bar');
											$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
											$pb.progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, max, min) {
													return 'min: ' + min + ' current: ' + p + ' max: ' + max;
												}
											});
										});
										$('#m-custom-amount-format-with-min-value-basic-reset').click(function() {
											$('#m-custom-amount-format-with-min-value-basic .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, max, min) {
													return 'min: ' + min + ' current: ' + p + ' max: ' + max;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;75&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, max, min) {return &#39;min: &#39; + min + &#39; current: &#39; + p + &#39; max: &#39; + max;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-with-min-value-themed">
							<h5>themed progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-with-min-value-themed-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-with-min-value-themed-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-with-min-value-themed-start').click(function() {
											$('#m-custom-amount-format-with-min-value-themed .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, max, min) {
														return 'min: ' + min + ' current: ' + p + ' max: ' + max;
													}
												});
											});
										});
										$('#m-custom-amount-format-with-min-value-themed-reset').click(function() {
											$('#m-custom-amount-format-with-min-value-themed .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, max, min) {
													return 'min: ' + min + ' current: ' + p + ' max: ' + max;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, max, min) {return &#39;min: &#39; + min + &#39; current: &#39; + p + &#39; max: &#39; + max;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-with-min-value-striped">
							<h5>striped progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-with-min-value-striped-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-with-min-value-striped-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-with-min-value-striped-start').click(function() {
											$('#m-custom-amount-format-with-min-value-striped .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, max, min) {
														return 'min: ' + min + ' current: ' + p + ' max: ' + max;
													}
												});
											});
										});
										$('#m-custom-amount-format-with-min-value-striped-reset').click(function() {
											$('#m-custom-amount-format-with-min-value-striped .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, max, min) {
													return 'min: ' + min + ' current: ' + p + ' max: ' + max;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, max, min) {return &#39;min: &#39; + min + &#39; current: &#39; + p + &#39; max: &#39; + max;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-with-min-value-animated">
							<h5>animated progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-with-min-value-animated-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-with-min-value-animated-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-striped" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress progress-striped active">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-with-min-value-animated-start').click(function() {
											$('#m-custom-amount-format-with-min-value-animated .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, max, min) {
														return 'min: ' + min + ' current: ' + p + ' max: ' + max;
													}
												});
											});
										});
										$('#m-custom-amount-format-with-min-value-animated-reset').click(function() {
											$('#m-custom-amount-format-with-min-value-animated .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, max, min) {
													return 'min: ' + min + ' current: ' + p + ' max: ' + max;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-striped&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped active&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, max, min) {return &#39;min: &#39; + min + &#39; current: &#39; + p + &#39; max: &#39; + max;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-with-min-value-aria">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-with-min-value-aria-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-with-min-value-aria-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress progress-striped">
										<div class="progress-bar" role="progressbar" data-transitiongoal-backup="2" aria-valuemin="1" aria-valuemax="6"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-success" role="progressbar" data-transitiongoal-backup="-50" aria-valuemin="-80" aria-valuemax="20"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-info" role="progressbar" data-transitiongoal-backup="450" aria-valuemax="900"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-warning" role="progressbar" data-transitiongoal-backup="60" aria-valuemin="-100"></div>
									</div>
									<div class="progress progress-striped">
										<div class="progress-bar progress-bar-danger" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-with-min-value-aria-start').click(function() {
											$('#m-custom-amount-format-with-min-value-aria .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, max, min) {
														return 'min: ' + min + ' current: ' + p + ' max: ' + max;
													}
												});
											});
										});
										$('#m-custom-amount-format-with-min-value-aria-reset').click(function() {
											$('#m-custom-amount-format-with-min-value-aria .progress-bar').each(function() {
												var $pb = $(this);
												var valuemin = $pb.attr('aria-valuemin');
												var goal = valuemin < 0 ? valuemin : 0;
												$pb.attr('data-transitiongoal', goal);
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, max, min) {
														return 'min: ' + min + ' current: ' + p + ' max: ' + max;
													}
												});
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;2&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;1&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;6&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;-40&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;200&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span> <span class="na">aria-valuemax=</span><span class="s">&quot;120&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span> <span class="na">aria-valuemin=</span><span class="s">&quot;30&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress progress-striped&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, max, min) {return &#39;min: &#39; + min + &#39; current: &#39; + p + &#39; max: &#39; + max;}});
});</code></pre></div>

						</div>
						<div class="tab-pane fade" id="m-custom-amount-format-with-min-value-animation">
							<h5>custom aria range progressbars <button type="button" class="btn btn-primary" id="m-custom-amount-format-with-min-value-animation-start">start</button> <button type="button" class="btn btn-danger" id="m-custom-amount-format-with-min-value-animation-reset">reset</button></h5>
							<div class="bs-example">
								<div class="">
									<div class="progress">
										<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="20"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-success six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="40"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-info six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="60"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-warning six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="80"></div>
									</div>
									<div class="progress">
										<div class="progress-bar progress-bar-danger six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
									</div>
								</div>
								<script type='text/javascript'>
									$(document).ready(function() {
										$('#m-custom-amount-format-with-min-value-animation-start').click(function() {
											$('#m-custom-amount-format-with-min-value-animation .progress-bar').each(function() {
												var $pb = $(this);
												$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
												$pb.progressbar({
													display_text: 'center',
													use_percentage: false,
													amount_format: function(p, max, min) {
														return 'min: ' + min + ' current: ' + p + ' max: ' + max;
													}
												});
											});
										});
										$('#m-custom-amount-format-with-min-value-animation-reset').click(function() {
											$('#m-custom-amount-format-with-min-value-animation .progress-bar').attr('data-transitiongoal', 0).progressbar({
												display_text: 'center',
												use_percentage: false,
												amount_format: function(p, max, min) {
													return 'min: ' + min + ' current: ' + p + ' max: ' + max;
												}
											});
										});
									});
								</script>
							</div>

							<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;20&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-success six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;40&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-info six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;60&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-warning six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;80&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar progress-bar-danger six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({display_text: &#39;center&#39;, use_percentage: false, amount_format: function(p, max, min) {return &#39;min: &#39; + min + &#39; current: &#39; + p + &#39; max: &#39; + max;}});
});</code></pre></div>

						</div>
					</div>

					<div style="height: 40px">&nbsp;</div>

					<p>
						<a name="m-callback"></a>
						<h4>callbacks <button type="button" class="btn btn-primary" id="m-callback-start">start</button> <button type="button" class="btn btn-danger" id="m-callback-reset">reset</button></h4></p>

					<div class="bs-example m-callback">
						<div class="progress">
							<div class="progress-bar" role="progressbar" data-transitiongoal-backup="100"></div>
						</div>
						<p>update: <span class="label label-info" id="m-callback-update"></span></p>
						<p>done: <span class="label label-success" id="m-callback-done"></span></p>
						<script type='text/javascript'>
							$(document).ready(function() {
								$('#m-callback-start').click(function() {
									$('#m-callback-update').html('');
									$('#m-callback-done').html('');
									var $pb = $('.m-callback .progress-bar');
									$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
									$pb.progressbar({
										update: function(current_percentage) {
											$('#m-callback-update').html(current_percentage);
										},
										done: function() {
											$('#m-callback-done').html('yeah! done!');
										}
									});
								});
								$('#m-callback-reset').click(function() {
									$('#m-callback-update').html('');
									$('#m-callback-done').html('');
									$('.m-callback .progress-bar').attr('data-transitiongoal', 0).progressbar({
										update: function(current_percentage) {
											$('#m-callback-update').html(current_percentage);
										},
										done: function() {
											$('#m-callback-done').html('yeah! done!');
										}
									});
								});
							});
						</script>
					</div>

					<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;update&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;done&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({
        update: function(current_percentage) { $(&#39;#update&#39;).html(current_percentage); },
        done: function() { $(&#39;#done&#39;).html(&#39;yeah! done!&#39;); }
    });
});</code></pre></div>

					<div style="height: 40px">&nbsp;</div>

					<a name="m-callback-this"></a>
					<h4>callbacks using $this <button type="button" class="btn btn-primary" id="m-callback-this-start">start</button> <button type="button" class="btn btn-danger" id="m-callback-this-reset">reset</button></h4>

					<div class="bs-example m-callback-this">
						<div class="progress">
							<div class="progress-bar six-sec-ease-in-out" role="progressbar" data-transitiongoal-backup="100"></div>
						</div>
						<script type='text/javascript'>
							$(document).ready(function() {
								// thanks:
								// http://stackoverflow.com/questions/5833624/increase-css-brightness-color-on-click-with-jquery-javascript
								// http://jsfiddle.net/K8cMX/7/
								function HsvToRgb(h, s, v) {
									h = h / 360;
									s = s / 100;
									v = v / 100;

									if(s == 0) {
										var val = Math.round(v * 255);
										return {
											r: val,
											g: val,
											b: val
										};
									}
									hPos = h * 6;
									hPosBase = Math.floor(hPos);
									base1 = v * (1 - s);
									base2 = v * (1 - s * (hPos - hPosBase));
									base3 = v * (1 - s * (1 - (hPos - hPosBase)));
									if(hPosBase == 0) {
										red = v;
										green = base3;
										blue = base1
									} else if(hPosBase == 1) {
										red = base2;
										green = v;
										blue = base1
									} else if(hPosBase == 2) {
										red = base1;
										green = v;
										blue = base3
									} else if(hPosBase == 3) {
										red = base1;
										green = base2;
										blue = v
									} else if(hPosBase == 4) {
										red = base3;
										green = base1;
										blue = v
									} else {
										red = v;
										green = base1;
										blue = base2
									};

									red = Math.round(red * 255);
									green = Math.round(green * 255);
									blue = Math.round(blue * 255);
									return {
										r: red,
										g: green,
										b: blue
									};
								}
								$('#m-callback-this-start').click(function() {
									var $pb = $('.m-callback-this .progress-bar');
									$pb.attr('data-transitiongoal', $pb.attr('data-transitiongoal-backup'));
									$pb.progressbar({
										update: function(current_percentage, $this) {
											var color_helper = Math.round(current_percentage * 1.2); // red to green == 0 to 120 degree
											var colors = HsvToRgb(color_helper, 100, 100);
											$this.parent().parent().css('background-color', 'rgb(' + colors['r'] + ', ' + colors['g'] + ', ' + colors['b'] + ')');
										}
									});
								});
								$('#m-callback-this-reset').click(function() {
									$('.m-callback-this .progress-bar').attr('data-transitiongoal', 0).progressbar();
								});
							});
						</script>
					</div>

					<div class="highlight"><pre><code class="language-html" data-lang="html">.six-sec-ease-in-out {
    -webkit-transition: width 6s ease-in-out;
    -moz-transition: width 6s ease-in-out;
    -ms-transition: width 6s ease-in-out;
    -o-transition: width 6s ease-in-out;
    transition: width 6s ease-in-out;
}

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar six-sec-ease-in-out&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span> <span class="na">data-transitiongoal=</span><span class="s">&quot;100&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({
        update: function(current_percentage, $this) {
            $this.parent().parent().css(&#39;background-color&#39;, &#39;rgb(&#39; + Math.round(current_percentage / 100 * 255) + &#39;, 0, 0)&#39;);
        }
    });
});</code></pre></div>

					<div style="height: 40px">&nbsp;</div>

					<a name="m-error"></a>
					<h4>error <button type="button" class="btn btn-primary" id="m-error-start">start</button></h4>

					<div class="bs-example m-error">
						<div class="progress">
							<div class="progress-bar" role="progressbar"></div>
						</div>
						<p>error: <span class="label label-danger" id="m-callback-error"></span></p>
						<script type='text/javascript'>
							$(document).ready(function() {
								$('#m-error-start').click(function() {
									$('.m-error .progress-bar').progressbar({
										fail: function(error) {
											$('#m-callback-error').html(error);
										}
									});
								});
							});
						</script>
					</div>

					<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;error&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>

$(document).ready(function() {
    $(&#39;.progress .progress-bar&#39;).progressbar({
        fail: function(error) { $(&#39;#error&#39;).html(error); }
    });
});</code></pre></div>

					<div style="height: 40px">&nbsp;</div>

					<a name="m-multi-trigger"></a>
					<h4>multi trigger <button type="button" class="btn btn-primary" id="m-multi-trigger-0">0</button> <button type="button" class="btn btn-primary" id="m-multi-trigger-50">50</button> <button type="button" class="btn btn-primary" id="m-multi-trigger-100">100</button></h4></h4>

					<div class="bs-example m-multi-trigger">
						<div class="progress">
							<div class="progress-bar" role="progressbar"></div>
						</div>
						<script type='text/javascript'>
							$(document).ready(function() {
								var $pb = $('.m-multi-trigger .progress-bar');
								$('#m-multi-trigger-0').click(function() {
									$pb.attr('data-transitiongoal', 0).progressbar({
										display_text: 'center'
									});
								});
								$('#m-multi-trigger-50').click(function() {
									$pb.attr('data-transitiongoal', 50).progressbar({
										display_text: 'center'
									});
								});
								$('#m-multi-trigger-100').click(function() {
									$pb.attr('data-transitiongoal', 100).progressbar({
										display_text: 'center'
									});
								});
							});
						</script>
					</div>

					<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress&quot;</span><span class="nt">&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;progress-bar&quot;</span> <span class="na">role=</span><span class="s">&quot;progressbar&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">id=</span><span class="s">&quot;trigger-0&quot;</span><span class="nt">&gt;</span>0<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">id=</span><span class="s">&quot;trigger-50&quot;</span><span class="nt">&gt;</span>50<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">&quot;button&quot;</span> <span class="na">id=</span><span class="s">&quot;trigger-100&quot;</span><span class="nt">&gt;</span>100<span class="nt">&lt;/button&gt;</span>

$(document).ready(function() {
    var $pb = $(&#39;.progress .progress-bar&#39;);
    $(&#39;#m-multi-trigger-0&#39;).click(function() {
        $pb.attr(&#39;data-transitiongoal&#39;, 0).progressbar({display_text: &#39;center&#39;});
    });
    $(&#39;#m-multi-trigger-50&#39;).click(function() {
        $pb.attr(&#39;data-transitiongoal&#39;, 50).progressbar({display_text: &#39;center&#39;});
    });
    $(&#39;#m-multi-trigger-100&#39;).click(function() {
        $pb.attr(&#39;data-transitiongoal&#39;, 100).progressbar({display_text: &#39;center&#39;});
    });
});</code></pre></div>

				</div>

			</div>
		</div>
		<div id="push"></div>
		</div>
		<!---->

		</div>

		</div>

		<script src="js/bootstrap-progressbar.js"></script>
		<script src="js/minddust.min.js"></script>
	</body>

</html>